<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 学生列表区域 -->
      <el-table :data="studentList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="学生姓名" prop="name"></el-table-column>
        <el-table-column label="身份证号" prop="idcardnumber"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-radio-group v-model="studentState[scope.row.idcardnumber]">
              <el-radio :label="1">出勤</el-radio>
              <el-radio :label="2">旷课</el-radio>
              <el-radio :label="3">请假</el-radio>
              <el-radio :label="4">迟到</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="3" :offset="21">
          <el-button
            class="submitbtn"
            type="primary"
            @click="rollCall()"
            >提交</el-button
          >
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getRollCallInfo,rollCall } from '../../api/rollcall'
export default {
  props: ['id'],
  data() {
    return {
      studentList: [],
      studentState: {},
      state: 0,
    }
  },
  created() {
    this.getStudentList()
  },
  methods: {
    async getStudentList() {
      const { state, students } = await getRollCallInfo(this.id)
      if (!students) return
      this.studentList = students
      this.state = state
      this.studentList.forEach(item => {
        let key=item.idcardnumber
        if(this.state){
          this.$set(this.studentState,key,item.state)
        }else{
          this.$set(this.studentState,key,1)
        }
      });

    },
    async rollCall(){
      const data={normal:[],leave:[],cut_classes:[],late:[]}
      const keys=Object.keys(this.studentState)
      console.log(keys);
      keys.forEach(id => {
        if(this.studentState[id]==1){
          data.normal.push(id)
        }
        if(this.studentState[id]==2){
          data.cut_classes.push(id)
        }
        if(this.studentState[id]==3){
          data.leave.push(id)
        }
        if(this.studentState[id]==4){
          data.late.push(id)
        }
      });
      // 班级总人数
      data.students_num=data.cut_classes.length+data.leave.length+data.late.length+data.normal.length
      // 已出勤人数
      data.attendance_num=data.normal.length+data.late.length
      data.normal=data.normal.join(',')
      data.leave=data.leave.join(',')
      data.cut_classes=data.cut_classes.join(',')
      data.late=data.late.join(',')


      const result=await rollCall(this.id,data)
      if (!result) return
      this.$message.success('提交点名成功')
      this.$router.replace({name:'adjust-course'})
    }
  },
}
</script>

<style scoped>
.submitbtn {
  width: 100%;
}
</style>
